<template>
  <div class="shopcar">
    <!-- 顶部 -->
    <van-nav-bar title="云·购" fixed />
    <div style="width: 100%; height: 40px"></div>

    <!-- 菜单栏 -->
    <van-checkbox-group v-model="selGoods">
      <van-swipe-cell v-for="item in cartlist" :key="item.id">
        <van-row>
          <van-col span="2" class="leftbox">
            <van-checkbox :name="item"></van-checkbox>
          </van-col>
          <van-col span="22">
            <van-card
            :price="item.price"
                :title="item.product"
                class="goods-card"
                :thumb="item.image">

             <template #num>
                  <van-stepper v-model="item.buynum" />
                </template>
            </van-card>
          </van-col>
        </van-row>

        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            style="height: 100%"
            @click="delcard(item, index)"
          />
        </template>
      </van-swipe-cell>
    </van-checkbox-group>
    <div style="width: 100%; height: 100px"></div>
    <!-- 底部 -->

    <van-submit-bar
      class="bar"
      :price="total"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="selAll" @click="checkAll">全选</van-checkbox>
    </van-submit-bar>

    <my-bottom :active="1"></my-bottom>
  </div>
</template>

<script>
import MyBottom from "@/components/MyBottom.vue";
import axios from "axios";
export default {
  components: { MyBottom },
  data() {
    return {
      props: ["active"],
      selAll: false,
      selGoods: [],
      total: 0,
      cartlist: [],
      active: 2,
    };
  },
  methods: {
    onSubmit() {},
    checkAll() {
      if (this.selAll) {
        this.selGoods = this.cartlist;
      } else {
        this.selGoods = [];
      }
    },
    delcard(item, index) {
      this.$dialog
        .confirm({
          message: `您确定要删除${item.title}吗?`,
        })
        .then(() => {
          this.cartlist.splice(index, 1);
          let i = this.selGoods.indexOf(item);
          console.log(i);
          if (i != -1) {
            this.selGoods.splice(i, 1);
          }
        })
        .catch(() => {});
    },
   
  },
 created() {
      axios
        .get("/api/alproduch.php")
        .then((response) => {
          this.cartlist = response.data.data;
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        });
    },
  watch: {
    selGoods: {
      handler(arr) {
        this.total = 0;
        arr.forEach((item) => {
          // console.log(item.num*item.price)
          this.total += item.buynum * item.price * 100;
        });

        if (arr.length === this.cartlist.length) {
          this.selAll = true;
        } else {
          this.selAll = false;
        }
      },
      deep: true,
    },
  },
};
</script>


<style scoped>
.shopcar {
  background: rgb(242, 240, 243);
}
>>> .van-nav-bar {
  background: #9cf;
}
>>> .van-nav-bar__title {
  font-size: 18px;
  color: rgb(96, 46, 153);
}

.goods-card {
  margin: 0px;
  height: 100px;
  background-color: #ccff;
  border-radius: 0px 10px 10px 0px;
}

.delete-button {
  height: 100%;
}
.van-row {
  margin: 3px 0px;
}

.leftbox {
  background-color: #ffffff;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px 0px 0px 10px;
}
.bar {
  bottom: 50px;
}
</style>

